<template>
  <div id="success-defense"></div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "SuccessDefense",
    mounted() {
      const data = [
        {
          time: '0-15\'',
          frequency: 3,
        },
        {
          time: '15-30\'',
          frequency: 6,
        },
        {
          time: '30-45\'+',
          frequency: 4,
        },
        {
          time: '45-60\'',
          frequency: 4,
        },
        {
          time: '60-75\'',
          frequency: 4,
        },
        {
          time: '75-120\'+',
          frequency: 4,
        },

      ];
      const columnPlot = new Column('success-defense', {
        data,
        xField: 'time',
        yField: 'frequency',
        label:{
          style:{
            fill:'black',
            fontSize:20,
          },
          position:top
        },
        columnStyle:{
          fill:'#1A936F',
          shadowColor:'red'
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
          tickLine:null
        },
        yAxis:{
          grid:null,
          label:null,
          max:10
        },
        meta: {
          time: {
            alias: '类别',
          },
          frequency: {
            alias: '成功次数',
          },
        },
        tooltip:{
          showMarkers:true
        },
        minColumnWidth: 90,
        maxColumnWidth: 90,
        interactions: [{ type: 'active-region', enable: false }],
      });
      columnPlot.render();
    }
  }
</script>

<style scoped>
  #success-defense {
    width: 100%;
    height: 100%;
  }
</style>